<template>
	<div id="contentBox" style="display:flex;">
		
		<div id="tableBox" style="margin:25px 25px 0;width:500px;" >

			<el-button type="primary" @click="addTopLevel" size="small" style="margin-bottom:10px;">添加一级菜单</el-button>
			<el-tree 
			  :data="listMenu"
			  :props="defaultProps"
			  :show-checkbox='false'
			  node-key="id"
			  :default-expand-all="false"
			  :expand-on-click-node="false"
			  :render-content="renderContent"
              @node-click="nodeClick"
              :accordion="true"
			  >
			</el-tree>
		</div>
		<div style="flex:1" v-if="menuDialogSendData.show">

			<div>
				<h3 style="border-bottom:1px solid #ccc">{{menuDialogSendData.data.menuName}}</h3> 
				   
				<template>
				  <el-radio-group v-for="(item,index) in roleList" :key="index" v-model="roleId">
				    <el-radio     style="margin:0.5em"   :label="item" :disabled="item.isFlag===1" >{{ item.roleName}}</el-radio> 
				  </el-radio-group>
				</template>

				<div v-if="permissionList.length > 0">
					<h3 style="border-bottom:1px solid #ccc">权限列表</h3> 
					  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
					  <template v-for="p in permissionList" > 
				  		   <div>  
				  		   		<el-tag class="el-tag"  type="primary" :hit="false">{{p.typeCH}}</el-tag> 
				  		   </div> 
					  	   
					  	   <div style="margin: 15px 0;"></div>  
						   <el-checkbox-group v-model="permissionArray" @change="handleCheckedCitiesChange">
						    <el-checkbox v-for="p1 in p.childrenPermissionList" :label="p1.id" :key="p1.id">{{p1.permissionName}}</el-checkbox>
						   </el-checkbox-group>    
					  </template>  
				</div>

				<div v-if="permissionList.length <= 0 && isSelected  ">
					<h3 style="border-bottom:1px solid #ccc">此菜单下暂无权限..</h3>
				</div>
				
			</div> 
			<div  style="text-align:left;margin-top:15px;"> 
				 <el-button size="small" type="primary" :disabled="!isSelected || permissionList.length <= 0" @click="editData()">确 认</el-button>
			</div>
        </div>
        <el-dialog  title="按钮权限管理" :visible.sync="authDialogSendData.dialogFormVisible" top="10%" v-if="authDialogSendData.dialogFormVisible">
            <authDialogSendData v-on:refreshSeachData="selectMenuListData()"  :authDialogSendData="authDialogSendData"  :systemPermissionEnum="systemPermissionEnum"></authDialogSendData  >
		</el-dialog>
		<!-- <el-dialog  title="角色菜单管理" :visible.sync="menuDialogSendData.dialogFormVisible" top="10%" v-if="menuDialogSendData.dialogFormVisible">
		            <menuDialogForm :menuDialogSendData="menuDialogSendData" v-on:refreshSeachData="seachData()"></menuDialogForm>
		</el-dialog> -->
	</div>
</template>
<script src="./index.js"></script>
<style scoped lang="stylus">
	@import "./index.styl"
</style>
